<template>
  <div class="system-log">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>日志管理</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="系统日志" name="systemLog">
            <div class="system-log-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>系统日志</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="logDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadSystemLogs"
                      />
                      <el-select v-model="logLevel" placeholder="日志级别" @change="loadSystemLogs">
                        <el-option label="全部" value="" />
                        <el-option label="信息" value="info" />
                        <el-option label="警告" value="warning" />
                        <el-option label="错误" value="error" />
                      </el-select>
                      <el-button @click="exportLogs">导出日志</el-button>
                      <el-button type="danger" @click="clearLogs">清空日志</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="systemLogs" style="width: 100%" height="500">
                  <el-table-column prop="time" label="时间" width="180" />
                  <el-table-column prop="level" label="级别" width="80">
                    <template #default="scope">
                      <el-tag :type="getLogLevelType(scope.row.level)">
                        {{ scope.row.level }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="module" label="模块" width="120" />
                  <el-table-column prop="message" label="消息" />
                  <el-table-column prop="ip" label="IP地址" width="120" />
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <el-button size="small" @click="viewLogDetails(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="totalLogs"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="业务日志" name="businessLog">
            <div class="business-log-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>业务日志</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="businessDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadBusinessLogs"
                      />
                      <el-select v-model="businessModule" placeholder="业务模块" @change="loadBusinessLogs">
                        <el-option label="全部" value="" />
                        <el-option label="用户管理" value="user" />
                        <el-option label="订单管理" value="order" />
                        <el-option label="财务管理" value="finance" />
                      </el-select>
                      <el-button @click="exportBusinessLogs">导出日志</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="businessLogs" style="width: 100%" height="500">
                  <el-table-column prop="time" label="时间" width="180" />
                  <el-table-column prop="user" label="操作用户" width="120" />
                  <el-table-column prop="module" label="业务模块" width="120" />
                  <el-table-column prop="action" label="操作类型" width="120" />
                  <el-table-column prop="description" label="操作描述" />
                  <el-table-column prop="result" label="结果" width="80">
                    <template #default="scope">
                      <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'">
                        {{ scope.row.result }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <el-button size="small" @click="viewBusinessLogDetails(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="businessCurrentPage"
                    v-model:page-size="businessPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="businessTotalLogs"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleBusinessSizeChange"
                    @current-change="handleBusinessCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="错误日志" name="errorLog">
            <div class="error-log-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>错误日志</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="errorDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadErrorLogs"
                      />
                      <el-button @click="exportErrorLogs">导出日志</el-button>
                      <el-button type="danger" @click="clearErrorLogs">清空日志</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="errorLogs" style="width: 100%" height="500">
                  <el-table-column prop="time" label="时间" width="180" />
                  <el-table-column prop="level" label="错误级别" width="100">
                    <template #default="scope">
                      <el-tag :type="getErrorLevelType(scope.row.level)">
                        {{ scope.row.level }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="module" label="模块" width="120" />
                  <el-table-column prop="errorMessage" label="错误信息" />
                  <el-table-column prop="stackTrace" label="堆栈跟踪" width="200" />
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="viewErrorLogDetails(scope.row)">详情</el-button>
                      <el-button size="small" type="primary" @click="handleError(scope.row)">处理</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="errorCurrentPage"
                    v-model:page-size="errorPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="errorTotalLogs"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleErrorSizeChange"
                    @current-change="handleErrorCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="安全日志" name="securityLog">
            <div class="security-log-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>安全日志</span>
                    <div class="header-actions">
                      <el-date-picker
                        v-model="securityDateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD"
                        @change="loadSecurityLogs"
                      />
                      <el-select v-model="securityAction" placeholder="操作类型" @change="loadSecurityLogs">
                        <el-option label="全部" value="" />
                        <el-option label="登录" value="login" />
                        <el-option label="登出" value="logout" />
                        <el-option label="权限变更" value="permission" />
                        <el-option label="数据访问" value="dataAccess" />
                      </el-select>
                      <el-button @click="exportSecurityLogs">导出日志</el-button>
                    </div>
                  </div>
                </template>
                
                <el-table :data="securityLogs" style="width: 100%" height="500">
                  <el-table-column prop="time" label="时间" width="180" />
                  <el-table-column prop="user" label="用户" width="120" />
                  <el-table-column prop="action" label="操作类型" width="120" />
                  <el-table-column prop="resource" label="操作资源" width="150" />
                  <el-table-column prop="ip" label="IP地址" width="120" />
                  <el-table-column prop="location" label="地理位置" width="120" />
                  <el-table-column prop="result" label="结果" width="80">
                    <template #default="scope">
                      <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'">
                        {{ scope.row.result }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="描述" />
                  <el-table-column label="操作" width="100">
                    <template #default="scope">
                      <el-button size="small" @click="viewSecurityLogDetails(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                  <el-pagination
                    v-model:current-page="securityCurrentPage"
                    v-model:page-size="securityPageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="securityTotalLogs"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSecuritySizeChange"
                    @current-change="handleSecurityCurrentChange"
                  />
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const activeTab = ref('systemLog')
const logDateRange = ref([])
const logLevel = ref('')
const businessDateRange = ref([])
const businessModule = ref('')
const errorDateRange = ref([])
const securityDateRange = ref([])
const securityAction = ref('')

// 分页数据
const currentPage = ref(1)
const pageSize = ref(20)
const totalLogs = ref(100)
const businessCurrentPage = ref(1)
const businessPageSize = ref(20)
const businessTotalLogs = ref(80)
const errorCurrentPage = ref(1)
const errorPageSize = ref(20)
const errorTotalLogs = ref(15)
const securityCurrentPage = ref(1)
const securityPageSize = ref(20)
const securityTotalLogs = ref(120)

// 系统日志数据
const systemLogs = ref([
  {
    time: '2023-06-15 14:30:22',
    level: '信息',
    module: '用户管理',
    message: '用户admin登录成功',
    ip: '192.168.1.100'
  },
  {
    time: '2023-06-15 14:25:11',
    level: '警告',
    module: '系统监控',
    message: 'CPU使用率超过80%',
    ip: '192.168.1.1'
  },
  {
    time: '2023-06-15 14:20:05',
    level: '错误',
    module: '数据库',
    message: '数据库连接失败',
    ip: '192.168.1.1'
  }
])

// 业务日志数据
const businessLogs = ref([
  {
    time: '2023-06-15 14:15:33',
    user: 'admin',
    module: '用户管理',
    action: '创建用户',
    description: '创建新用户user123',
    result: '成功'
  },
  {
    time: '2023-06-15 14:10:45',
    user: 'manager',
    module: '订单管理',
    action: '修改订单',
    description: '修改订单号ORD20230615001',
    result: '成功'
  }
])

// 错误日志数据
const errorLogs = ref([
  {
    time: '2023-06-15 14:20:05',
    level: '严重',
    module: '数据库',
    errorMessage: '数据库连接失败',
    stackTrace: 'ConnectionException: Failed to connect to database'
  },
  {
    time: '2023-06-15 13:45:22',
    level: '一般',
    module: 'API接口',
    errorMessage: 'API调用超时',
    stackTrace: 'TimeoutException: Request timeout after 30 seconds'
  }
])

// 安全日志数据
const securityLogs = ref([
  {
    time: '2023-06-15 14:30:22',
    user: 'admin',
    action: '登录',
    resource: '系统登录',
    ip: '192.168.1.100',
    location: '北京',
    result: '成功',
    description: '用户admin从北京登录系统'
  },
  {
    time: '2023-06-15 14:25:11',
    user: 'user123',
    action: '数据访问',
    resource: '客户信息',
    ip: '192.168.1.101',
    location: '上海',
    result: '成功',
    description: '用户user123访问客户信息数据'
  }
])

// 方法
const loadSystemLogs = () => {
  ElMessage.info('加载系统日志')
}

const exportLogs = () => {
  ElMessage.success('系统日志导出成功')
}

const clearLogs = () => {
  ElMessageBox.confirm(
    '确定要清空所有系统日志吗？此操作不可逆。',
    '清空日志确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('系统日志已清空')
    systemLogs.value = []
  })
}

const viewLogDetails = (row: any) => {
  ElMessage.info(`查看日志详情: ${row.time}`)
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadSystemLogs()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadSystemLogs()
}

const loadBusinessLogs = () => {
  ElMessage.info('加载业务日志')
}

const exportBusinessLogs = () => {
  ElMessage.success('业务日志导出成功')
}

const viewBusinessLogDetails = (row: any) => {
  ElMessage.info(`查看业务日志详情: ${row.time}`)
}

const handleBusinessSizeChange = (val: number) => {
  businessPageSize.value = val
  loadBusinessLogs()
}

const handleBusinessCurrentChange = (val: number) => {
  businessCurrentPage.value = val
  loadBusinessLogs()
}

const loadErrorLogs = () => {
  ElMessage.info('加载错误日志')
}

const exportErrorLogs = () => {
  ElMessage.success('错误日志导出成功')
}

const clearErrorLogs = () => {
  ElMessageBox.confirm(
    '确定要清空所有错误日志吗？此操作不可逆。',
    '清空日志确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('错误日志已清空')
    errorLogs.value = []
  })
}

const viewErrorLogDetails = (row: any) => {
  ElMessage.info(`查看错误日志详情: ${row.time}`)
}

const handleError = (row: any) => {
  ElMessage.success(`已处理错误: ${row.errorMessage}`)
  // 从列表中移除
  const index = errorLogs.value.indexOf(row)
  if (index > -1) {
    errorLogs.value.splice(index, 1)
  }
}

const handleErrorSizeChange = (val: number) => {
  errorPageSize.value = val
  loadErrorLogs()
}

const handleErrorCurrentChange = (val: number) => {
  errorCurrentPage.value = val
  loadErrorLogs()
}

const loadSecurityLogs = () => {
  ElMessage.info('加载安全日志')
}

const exportSecurityLogs = () => {
  ElMessage.success('安全日志导出成功')
}

const viewSecurityLogDetails = (row: any) => {
  ElMessage.info(`查看安全日志详情: ${row.time}`)
}

const handleSecuritySizeChange = (val: number) => {
  securityPageSize.value = val
  loadSecurityLogs()
}

const handleSecurityCurrentChange = (val: number) => {
  securityCurrentPage.value = val
  loadSecurityLogs()
}

// 工具方法
const getLogLevelType = (level: string) => {
  switch (level) {
    case '错误': return 'danger'
    case '警告': return 'warning'
    case '信息': return 'success'
    default: return 'info'
  }
}

const getErrorLevelType = (level: string) => {
  switch (level) {
    case '严重': return 'danger'
    case '一般': return 'warning'
    case '轻微': return 'info'
    default: return 'info'
  }
}
</script>

<style scoped>
.system-log {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>